<template>
  <el-container>
    <el-header>
      <el-row>
        <el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
          <el-input v-model="input" placeholder="请输入登录名或姓名"></el-input>
        </el-col>
        <el-col :xs="24" :sm="2" :md="2" :lg="2" :xl="2">
          <el-button type="primary" @click="queryUser()">查询用户</el-button>
        </el-col>
        <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
          <el-button type="primary" @click="toAddNewUser()">新增用户</el-button>
        </el-col>
      </el-row>
      <!-- 增加用户 -->
      <el-dialog :visible.sync="dialogVisible">
        <span>新增用户</span><br />
        <el-form :model="addUserFrom" label-width="80px">
          <el-form-item label="登录名">
            <el-input v-model="addUserFrom.userName"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="addUserFrom.password"></el-input>
          </el-form-item>
          <el-form-item label="真实姓名">
            <el-input v-model="addUserFrom.realName"></el-input>
          </el-form-item>
          <!-- 下拉列表 -->
          <el-form-item label="所在科室">
            <el-select v-model="addUserFrom.deptId" placeholder="所在科室">
              <el-option v-for="item in deptIdList" :key="item.ID" :label="item.DeptName" :value="item.ID">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="用户类别">
            <el-select v-model="addUserFrom.userType" placeholder="用户类别">
              <el-option v-for="item in userTypeList" :key="item.ID" :label="item.ConstantName" :value="item.ID">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="医生职称">
            <el-select v-model="addUserFrom.docTileId" placeholder="医生职称">
              <el-option v-for="item in docList" :key="item.ID" :label="item.ConstantName" :value="item.ID">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="挂号级别">
            <el-select v-model="addUserFrom.registleId" placeholder="挂号级别">
              <el-option v-for="item in registList" :key="item.ID" :label="item.RegistName" :value="item.ID">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addNewUser()">增 加</el-button>
        </span>
      </el-dialog>

    </el-header>

    <!-- 查询用户 -->
    <el-row>
      <el-col :span='24'>
        <el-table :data="userTables">
          <el-table-column label="登录名" prop="UserName"></el-table-column>
          <el-table-column label="真实姓名" prop="RealName"></el-table-column>
          <el-table-column label="用户类别" prop="ConstantName"></el-table-column>
          <el-table-column label="医生职称" prop="ConstantName"></el-table-column>
          <el-table-column label="所在科室" prop="DeptName"></el-table-column>
          <el-table-column label="挂号级别" prop="RegistName"></el-table-column>
          <!-- <el-table-column label="编码" prop="id"></el-table-column> -->
          <el-table-column label="操作">
            <template slot-scope="scope">
              <!-- 点击修改按钮，给后端发送点击药品id
                后端根据id查询相应数据，显示在弹出的对话框-->
              <el-button @click="toUpdateUser(scope.$index,scope.row)">修改</el-button>
              <el-dialog :visible.sync="updateDialogVisible">
                <span>修改药品</span><br />
                <el-form :model="updateUserFrom" label-width="80px">
                  <el-form-item label="登录名">
                    <el-input v-model="updateUserFrom.userName"></el-input>
                  </el-form-item>
                  <el-form-item label="密码">
                    <el-input v-model="updateUserFrom.password"></el-input>
                  </el-form-item>
                  <el-form-item label="真实姓名">
                    <el-input v-model="updateUserFrom.realName"></el-input>
                  </el-form-item>
                  <!-- 下拉列表 -->
                  <el-form-item label="所在科室">
                    <el-select v-model="updateUserFrom.deptId" placeholder="所在科室">
                      <el-option v-for="item in deptIdList" :key="item.ID" :label="item.DeptName" :value="item.ID">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="用户类别">
                    <el-select v-model="updateUserFrom.userType" placeholder="用户类别">
                      <el-option v-for="item in userTypeList" :key="item.ID" :label="item.ConstantName" :value="item.ID">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="医生职称">
                    <el-select v-model="updateUserFrom.docTileId" placeholder="医生职称">
                      <el-option v-for="item in docList" :key="item.ID" :label="item.ConstantName" :value="item.ID">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="挂号级别">
                    <el-select v-model="updateUserFrom.registleId" placeholder="挂号级别">
                      <el-option v-for="item in registList" :key="item.ID" :label="item.RegistName" :value="item.ID">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="updateDialogVisible = false">取 消</el-button>
                  <el-button type="primary" @click="updateUser()">保 存</el-button>
                </span>
              </el-dialog>
              <el-button @click="deleOne(scope.$index,scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span='24'>
        <el-pagination layout="prev, pager, next" :total="totalNumber" :hide-on-single-page="pageShow" @current-change="pageChange">
        </el-pagination>
      </el-col>
    </el-row>
  </el-container>
</template>

<script>
  import {
    postRequest
  } from '../../utils/ajaxapi'
  import {
    getRequest
  } from '../../utils/ajaxapi'
  export default {
    mounted: function() {
      this.getUser(1, 10, "");
    },
    data() {
      return {
        pageShow: true,
        totalNumber: 300,
        userTables: [{
          ID:'',
          UserName: '',
          Password: '',
          RealName: '',
          ConstantName: '',
          DeptName: '',
          RegistName: ''
        }],
        input: '',
        dialogVisible: false,
        updateDialogVisible: false,
        addUserFrom: {
          userName: '',
          password: '',
          realName: '',
          deptId: '',
          userType: '',
          docTileId: '',
          registleId: ''
        },
        //下拉列表
        deptIdList: [{
          ID: '',
          DeptName: '',
          DeptCategory: '',
          DelMark: ''
        }],
        userTypeList: [{
          ID: '',
          DelMark: '',
          ConstantName: '',
          ConstantCode: ''
        }],
        docList: [{
          ID: '',
          DelMark: '',
          ConstantName: '',
          ConstantCode: ''
        }],
        registList: [{
          ID: '',
          SequenNo: '',
          DelMark: '',
          RegistName: '',
          RegistCode: ''
        }],
        updateUserFrom: {
          id:'',
          userName: '',
          password: '',
          realName: '',
          deptId: '',
          userType: '',
          docTileId: '',
          registleId: ''
        },
      }
    },
    methods: {
      //点击分页组件，改变页码时执行
      //参数是页码数
      pageChange(pageNum) {
        this.getUser(pageNum, 10, this.input);
      },
      //查询用户
      queryUser() {
        if (this.input == null) {
          this.input = '';
        }
        this.getUser(1, 10, this.input);
      },
      //新增用户
      toAddNewUser() {
        this.getUserByConst();
        this.dialogVisible = true;
      },
      //增加按钮
      addNewUser() {
        let _this = this;
        postRequest("/his/sys/addNewUser", this.addUserFrom)
          .then(function(response) {
            _this.addUserFrom = response.data;
            _this.dialogVisible = false;
          })
      },
      //查询所在科室,用户类别,医生职称,挂号级别
      getUserByConst() {
        let _this = this;
        // this.dialogVisible = true;
        //所在科室
        getRequest("/his/sys/getDeptByTypeID")
          .then(function(response) {
            _this.deptIdList = response.data;
          });
        //用户类别
        getRequest("/his/sys/getConstantItemByTypeId?typeId=12")
          .then(function(response) {
            _this.userTypeList = response.data;
          });
        //医生职称
        getRequest("/his/sys/getConstantItemByTypeId?typeId=8")
          .then(function(response) {
            _this.docList = response.data;
          });
          //挂号级别
          getRequest("/his/sys/getRegistByTypeID?typeID=1")
            .then(function(response) {
              _this.registList = response.data;
            });
      },
      //形参说明：pageNumber页码数
      //pageSize 每页显示的行数
      //drugN查询关键字
      getUser(pageNumber, pageSize, drugN) {
        let _this = this;
        getRequest("/his/sys/getUser?pageNumber=" + pageNumber +
            "&pageSize=" + pageSize +
            "&UserName=" + drugN)
          .then(function(response) {
            _this.userTables = response.data.map;
            _this.totalNumber = response.data.pageNumber;
          })
      },
      //修改初始弹窗
      toUpdateUser(index, row) {
        console.log(this.userTables[index]);
        this.updateUserFrom.id = this.userTables[index].ID;
        this.updateUserFrom.userName = this.userTables[index].UserName;
        this.updateUserFrom.password = this.userTables[index].Password;
        this.updateUserFrom.realName = this.userTables[index].RealName;
        this.getUserByConst();
        this.updateUserFrom.deptId = this.userTables[index].DeptName;
        this.updateUserFrom.userType = this.userTables[index].ConstantName;
        this.updateUserFrom.docTileId = this.userTables[index].ConstantName;
        this.updateUserFrom.registleId = this.userTables[index].RegistName;
        this.updateDialogVisible = true;
      },
      //修改
      updateUser(){
        let _this = this;

        postRequest("/his/sys/updateNewUser",{
          id:_this.updateUserFrom.id,
          userName:_this.updateUserFrom.userName,
          password:_this.updateUserFrom.password,
          realName:_this.updateUserFrom.realName,
          deptId:_this.updateUserFrom.deptId,
          userType:_this.updateUserFrom.userType,
          docTileId:_this.updateUserFrom.docTileId,
          registleId:_this.updateUserFrom.registleId,
        })
          .then(function(response){
            _this.updateDialogVisible = false;
          })
      },
      //删除
      deleOne(index,row){
        postRequest("/his/sys/deleteUser",{
          id:this.userTables[index].ID
        })
        .then(response =>{
          this.pageChange();
        })
      },
    }
  }
</script>

<style>
</style>
